<template>
  <div class="pc-video-wrap">
    <pcVideoCard :ref="'videoItem' + index" @updateVideoData="handleGetPublish" v-for="(item,index) in videoList" :key="item.id" :videoItem="item"></pcVideoCard>
  </div> 
</template>

<script>
import pcVideoCard from "@/components/pcVideoCard";
import {getAllPublish} from "@/api/request"
export default {
  name: 'pcVideo',
  components: {
    pcVideoCard
  },
  data(){
    return{
      currendVideoIndex:0,
      videoList:[],
      v1:'',
      v2:''
    }
  },
  watch:{
    v1(newValue) {
    if (this.$refs[newValue]) {
      this.$refs[newValue][0].$refs.video.pause();
    }
  },
  v2(newValue) {
    if (this.$refs[newValue]) {
      console.log(this.$refs[newValue][0],'zad')
      this.$refs[newValue][0].$refs.video.play();
    }
  }
  },
  methods:{
    async handleGetPublish(){
      await getAllPublish({
        "type":0
      }).then(res=>{
        if(res.data.status===0){
          this.videoList=res.data.data
          console.log(this.videoList,'hah')
        }
      })
    },
    stopAndPlayVideo(index1,index2){
      //暂停index1，播放index2
      this.v1='videoItem'+index1
      this.v2='videoItem'+index2
      // if(v1&&v2){
      //   console.log("999",v1,this.$refs.v1,this.$refs.videoItem0,this.$refs[v1])
      //   this.$refs[v1].$refs.video.pause()
      //   this.$refs[v2].$refs.video.play()
      // }
    },
  },
  async mounted(){

    await this.handleGetPublish()
    const that =this
    //默认进来播放第一个视频
    if(this.$refs.videoItem0){
      console.log(this.$refs.videoItem0[0].$refs.video,'zee')
      this.$refs.videoItem0[0].$refs.video.play().catch((error) => {
          // 处理播放失败的情况
          console.log('播放失败', error);
        });
    }

    document.addEventListener('keydown', function (event) {
      if (event.key === 'ArrowUp') {
        event.preventDefault(); // 阻止默认的按键行为，避免页面滚动
        const container = document.querySelector('.pc-video-wrap');
        const boxHeight = container.firstElementChild.offsetHeight+20;
        // 向上滚动一个元素高度的距离
        container.scrollTop -= boxHeight;
        if(that.currendVideoIndex >= 1){
          that.stopAndPlayVideo(that.currendVideoIndex,that.currendVideoIndex-1)
          that.currendVideoIndex--
        }else{
          that.$message.warning('已是顶部！');
        }
      } else if (event.key === 'ArrowDown') {
        event.preventDefault(); // 阻止默认的按键行为，避免页面滚动
        const container = document.querySelector('.pc-video-wrap');
        const boxHeight = container.firstElementChild.offsetHeight+20;
        // 向下滚动一个元素高度的距离
        container.scrollTop += boxHeight;
        
        if(that.currendVideoIndex < that.videoList.length){
          that.stopAndPlayVideo(that.currendVideoIndex,that.currendVideoIndex+1)
          that.currendVideoIndex++
        }else{
          that.$message.warning('到底了！');
        }
      }
    });
  }
}
</script>

<style scoped lang="less">
.pc-video-wrap{
  height: calc(100vh - 138px);
  overflow-y: scroll;
}
</style>
